<script setup>
import courses from '../../data/courses.json'
import { ref } from 'vue'
let isShow = ref(false)
var x = ref(0)
var y = ref(0)
const showMore = (order,week) => {
    isShow.value = !isShow.value
    x.value = order
    y.value = week
}
</script>

<template>
    <div class="iot_wrap">
        <table>
            <tr v-for="order in 5">
                <td v-for="week in 7">
                    <div class="iot-table-item" @click="showMore(order,week)"
                        :id="`${order}-${week}`"
                        :style="`background-color:${courses[`${order}-${week}`]['color']}`"
                        v-if="courses[`${order}-${week}`]">
                        <p>{{ courses[`${order}-${week}`]['course'] }}</p>
                        <p>{{ courses[`${order}-${week}`]['teacher'] }}</p>
                        <p>{{ courses[`${order}-${week}`]['site'] }}</p>
                    </div>
                    <!-- 此处无课 -->
                    <div v-else class="iot-table-item"></div>
                </td>
            </tr>
        </table>
        <div class="iot_course_pop" 
        v-show="isShow"
        v-if="courses[`${x}-${y}`]">
            <p>
                <span>{{ courses[`${x}-${y}`]['course'] }}</span>
                <span @click="showMore">取消</span>
            </p>
            <p>时间：星期{{ y }}-第{{ x }}节课</p>
            <p>教室：{{ courses[`${x}-${y}`]['site'] }}</p>
            <p>老师：{{ courses[`${x}-${y}`]['teacher'] }}</p>
        </div>
    </div>
</template>

<style lang="css" scoped>
.iot_wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.iot-table-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 11vw;
    height: 100%;
    overflow-x: auto;
    color: white;
}

.iot-table-item>p:nth-child(1) {
    margin: 2px auto;
    font-size: small;
}

.iot-table-item>p:nth-child(2) {
    margin: 2px auto;
    font-size: smaller;
}

.iot-table-item>p:nth-child(3) {
    margin: 2px auto;
    font-size: xx-small;
}

table {
    margin-left: 1.2vw;
    width: 100%;
    height: 100%;
}

tr {
    width: 100%;
    height: 18vh;
}

td {
    text-align: center;
    width: 12vw;
    /* border: .3px solid black; */
}

.iot_course_pop {
    background-color: azure;
    position: fixed;
    top: 30vh;
    left: 15%;
    width: 70vw;
    height: 20vh;
    border-radius: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: baseline;
}

.iot_course_pop p {
    width: 95%;
    height: 5vh;
    margin-left: 1.5vw;
}

.iot_course_pop>p:nth-child(1) {
    display: flex;
    justify-content: space-between;
}

.iot_course_pop>p:nth-child(1)>span:nth-child(2) {
    width: 10vw;
    height: 80%;
    background-color: hsla(160, 100%, 37%, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20%;
    margin-top: 1vh;
    color: white;
}
</style>
